<template>
  <div id="page-app">
    <transition :name="transitionName">
      <router-view v-wechat-title="$route.meta.title"></router-view>
    </transition>
    <toast></toast>
  </div>
</template>

<script>
  import toast from '~components/mixins/toast.vue'
  export default {
    name: 'app',
    data () {
      return {
        transitionName: 'slide-left',
        tofrom: ''
      }
    },
    components: {
      toast
    },
    watch: {
      '$route' (to, from) {
        // 这个暂时没用了
        const toDepth = to.path.split('/').length
        const fromDepth = from.path.split('/').length
        const transtion = toDepth < fromDepth ? 'slide-right' : 'slide-left'
        if (this.tofrom === from.path) {
          if (toDepth === fromDepth) {
            this.transitionName = 'slide-right'
          } else {
            this.transitionName = transtion
          }
          this.tofrom = from.path
        } else {
          this.transitionName = transtion
          this.tofrom = to.path
        }
      }
    }
  }
</script>
<style lang="scss">
  @import "assets/sass/base.scss";
  .slide-left-enter-active, .slide-left-leave-active,.slide-right-enter-active,.slide-right-leave-active{
    transition: all .6s;
  }
  .slide-left-enter-active,.slide-right-enter-active{
    position: absolute;
    width:100%;
    top:0;
    z-index:999;
  }
  .slide-left-enter, .slide-left-leave-active,.slide-right-enter, .slide-right-leave-active {
    opacity: 0;
    filter: blur(8px);
  }
  .slide-left-enter {
    left:0;
    opacify:1;
    filter: blur(0px);
    /*transform: translateX(100%);*/
  }
  .slide-left-leave-active {
    left:0;
    opacity: 0;
  }
  .slide-right-enter {
    left:0;
    opacity: 0;
  }
  .slide-right-leave-active {
    left:0;
    opacify:1;
    filter: blur(0px);
  }
</style>
